 @charset "utf-8";
/* CSS Document */

/*html*/
html {
	overflow-y: scroll;
}
/*body*/
body {
	font-size: 13px;
	line-height: 24px;
	color: #fff;
	overflow: hidden;
  background: url(../images/bg_pink.png) repeat left top;
}

@font-face {
  font-family: 'sfu_swissbtextracompressed';
  src: url('../fonts/sfuswissbtextracompressed-webfont.eot');
  src: url('../fonts/sfuswissbtextracompressed-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/sfuswissbtextracompressed-webfont.woff2') format('woff2'),
       url('../fonts/sfuswissbtextracompressed-webfont.woff') format('woff'),
       url('../fonts/sfuswissbtextracompressed-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'utm_gloriaregular';
  src: url('../fonts/utm_gloria-webfont.eot');
  src: url('../fonts/utm_gloria-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/utm_gloria-webfont.woff2') format('woff2'),
       url('../fonts/utm_gloria-webfont.woff') format('woff'),
       url('../fonts/utm_gloria-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'utm_staccato_regular';
  src: url('../fonts/utm_staccato-webfont.eot');
  src: url('../fonts/utm_staccato-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/utm_staccato-webfont.woff2') format('woff2'),
       url('../fonts/utm_staccato-webfont.woff') format('woff'),
       url('../fonts/utm_staccato-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;

}

.bg-tree{
  position: absolute;
  left: -270px;
  bottom: -50px;
}
.bg-pattern{
  background: url(../images/bg_body_01.png) repeat left top;
  /* background: url(../images/bg_body.jpg) repeat left top; */
}
.container{
  position: relative;
}
.logo{
  display: block;
  position: absolute;
  left: 0;
  top: -50px;
  z-index: 999;
}
.fr-logo-01{
  position: absolute;
  top: 55px;
  left: -30px;
}
.fr-star-01{
  position: absolute;
  right: 4px;
  top: -110px;
}

.logo-aeon{
  position: absolute;
  top: -100px;
  right: 0;
}
.pt-40{
  padding-top: 40px;
}
.main-product{
  background: url(../images/bg_product.png) no-repeat center top;
  position: relative;
  padding: 14px 0 0 21px;
  height: 409px;
  width: 666px;
  margin: 0 auto;
  z-index: 99;
}

.bg-waiting {
  background: url(../images/AEON-ArtLaptop.jpg) no-repeat center top;
  height: 409px;
  width: 666px;
  margin: 0 auto;
  z-index: 99;
}

.fr-product{
  position: absolute;
  left: 25px;
  top: 18px;
}

.bg-blue{
  background: url(../images/bg_pink.png) repeat left top;
  padding: 100px 0 50px;
  margin-top: -140px;
}

.name-product{
  font-family: 'utm_gloriaregular';
  font-size: 36px;
  color: #fff;
  text-align: center;
  margin: 0 0 5px;
}

.des-product{
  font-size: 15px;
  color: #fff;
  text-align: center;
}

.user-box{
  width: 182px;
  border-right: 1px dotted #fff;
  margin: 40px 0;
  float: left;
  padding: 0 0 0 10px;
  position: relative;
}
.user-box.last{
  border-right: 0;
}
.title-user{
  font-family: 'sfu_swissbtextracompressed';
  font-size: 24px;
  text-transform: uppercase;
  background: url(../images/bg_line_bottom.png) no-repeat left 28px;
  padding: 0 0 14px 5px;
  margin-bottom: 15px;
  text-shadow: rgb(128, 128, 128) 1px 1px 1px;
}
.img-user{
  position: relative;
  text-align: right;
  margin-right: 20px;
}
.fr-user{
  position: absolute;
  top: -2px;
  right: -6px;
}
.user-name{
  /*font-family: 'utm_staccato_regular';*/
  font-size: 18px;
  text-align: center;
  margin-top: 22px;
  text-shadow: rgb(128, 128, 128) 1px 1px 1px;
}

.button-01{
  background: url(../images/bg_button_01.png) no-repeat left top;
  font-family: 'utm_gloriaregular';
  color: #e40086;
  font-size: 30px;
  width: 264px;
  height: 46px;
  text-align: center;
  display: block;
  margin: 0 auto;
  border: none;
}

.login .bg-pattern{
  padding: 30px 0;
}
.login .logo{
  position: inherit;
  top: 0

}
.button-02{
  background: url(../images/bg_button_02.png) no-repeat left top;
  font-family: 'utm_gloriaregular';
  color: #e40086;
  font-size: 48px;
  width: 300px;
  height: 66px;
  text-align: center;
  display: block;
  margin: 0 auto;
  border: none;
}
.button-01:hover,
.button-02:hover{
  text-decoration: none;
}

.fr-logo-02{
  position: absolute;
  top: -41px;
  left: 235px;
}
.fr-star-02{
  position: absolute;
  right: 40px;
  top: -41px;
}

.login .bg-blue {
  background: url(../images/bg_pink.png) repeat left top;
  padding: 150px 0 50px 0;
  margin-top: 30px;
  min-height: 586px;
}

.show-price{
  color: #e40086;
  font-size: 49px;
  font-family: 'utm_gloriaregular';
  background: url(../images/bg_button_02.png) no-repeat left top;
  width: 300px;
  height: 66px;
  text-align: center;
  display: block;
  padding-top: 18px;
  margin: 0 auto;
}
.time-block{
  position: absolute;
  top: 0;
  left: 35px;
  z-index: 99;
}
.second-text{
  background: url(../images/bg_seconds.png) no-repeat left top;
  font-family: 'utm_staccato_regular';
  font-size: 24px;
  text-align: center;
  color: #fff;
  width: 103px;
  height: 43px;
  padding-top: 9px;
}
.second-text.win{
  background: url(../images/bg_seconds_win.png) no-repeat left top;
  color: #f8ff80;
  height: 59px;
  padding-top: 25px;
  margin-top: -17px;

}
.time-text{
  background: url(../images/bg_time.png) no-repeat left 3px;
  color: #fff;
  font-size: 24px;
  font-family: 'sfu_swissbtextracompressed';
  width: 103px;
  height: 27px;
  text-align: center;
  text-transform: uppercase;
  margin: 10px 0;

}
.price-vote{
  background: url(../images/bg_line_bottom_01.png) no-repeat 20px bottom;
  color: #fff;
  font-size: 30px;
  font-family: 'utm_gloriaregular';
  padding: 0 0 14px 8px;
  margin: 15px 0 0;
  text-align: center;
}
.price-vote.win{
  color: #f8ff80;
}

.count-product{
  background: url(../images/bg_circle.png) no-repeat left top;
  width: 88px;
  height: 88px;
  color: #fff;
  font-size: 24px;
  font-family: 'sfu_swissbtextracompressed';
  text-align: center;
  text-shadow: rgb(128, 128, 128) 1px 1px 1px;
  padding: 27px 0 0;
  position: absolute;
  right: 0;
  bottom: 0;
}

.mt-50{
  margin-top: 50px;
}
.mb-50{
  margin-bottom: 50px;
}
.mr-10{
  margin-right: 10px;
}

.welcome-block{
  clear: both;
  margin: 0 0 30px;
}

.input-price {
  color: #e40086;
  font-size: 49px;
  font-family: 'utm_gloriaregular';
  width: 264px;
  height: 66px;
  margin: 0 0 0 50px;
  padding-left: 10px;
  border: none;

  border-radius: 5px;
  -webkit-box-shadow: rgb(128, 128, 128) 0px 0px 3px;
  box-shadow: rgb(128, 128, 128) 0px 0px 3px;
}

.welcome-text{
  color: #fff;
  font-size: 24px;
  font-family: 'sfu_swissbtextracompressed';
  margin: 10px 0;
}
.welcome-01{
  margin: 30px 0 25px 90px;
}
.welcome-02{
  float: left;
  margin: 20px 0 0 135px;
}

.fr-logo-03{
  position: absolute;
  top: 0;
  left: 152px;
}
.fr-star-03{
  position: absolute;
  right: 0;
  top: 0;
}

.in-ipad .logo{
  position: inherit;
  top: 0;
  margin-top: 30px;

}
.in-ipad .main-product{
  /* margin: 30px auto 0; */
}
.in-ipad .bg-blue {
  padding: 120px 0 0;
}

.form-register{
  clear: both;
  padding: 50px 0;
}
.register .bg-pattern{
  padding: 0 0 30px;
}
.register .bg-blue {
  margin: 0;
  z-index: 99;
  position: relative;
}
.title-register{
  font-family: 'utm_gloriaregular';
  color: #fff;
  font-size: 48px;
  text-align: center;
}
.input-01{
  color: #444;
  font-size: 18px;
  width: 480px;
  height: 40px;
  padding: 0 10px;
  border: none;
  margin: 10px 0 25px;

  border-radius: 5px;
  -webkit-box-shadow: rgb(128, 128, 128) 0px 0px 3px;
  box-shadow: rgb(128, 128, 128) 0px 0px 3px;
}

.pt-100{
  padding-top: 100px;
}
.pb-50{
  padding-bottom: 35px
}
.pt-30{
  padding-top: 30px;
}
.fl-right{
  float: right;
}
.clear{
  clear: both;
}

.action-block{
  position: relative;
}
.button-refresh{
  position: absolute;
  top: 30px;
  right: 20px;
}

.btn-logout{
  background: url(../images/icon-logout.png) no-repeat right 5px;
  font-family: 'utm_gloriaregular';
  color: #fff;
  font-size: 30px;
  text-align: right;
  display: block;
  padding: 0 26px 0 0;
  margin: 10px 20px 0px 0;
  float: right;
  clear: both;
}
.btn-logout:hover{
  color: #fff;
}

/*===============
RESPONSIVE
===============*/
@media (min-width: 1200px) {


}

@media (min-width: 992px) {
  .container{
    width: 970px;
  }

}

/*media query（991以下）*/
@media screen and (max-width : 960px) {


}

@media (min-width: 768px) and (max-width: 991px) {
  .container{
    width: 750px;
  }
  .logo {
    top: -80px;
  }
  .fr-logo-01{
    z-index: 0;
  }
  .res-width{
    clear: both;
    margin: 0 70px;
    overflow: hidden;
  }

}


/*media query（768以下）*/
@media screen and (max-width : 768px) {


}


@media screen and (max-width : 540px) {

}

@media screen and (max-width : 420px) {


}


